import { useEffect, useState } from "react";
import style from "./index.module.scss";

import titleRecord from "@/assets/images/cats-eat-fish/title-change.png";
import { ArrowLeft } from "@react-vant/icons";
import { Toast } from "react-vant";

const BaseUrl =
  process.env.REACT_APP_ENV === "prod"
    ? "https://webapi.pupupal.com"
    : "https://kk-test-webapi.sayhaiapp.com";

const Record = ({ clickBack }) => {
  const urlParams = new URLSearchParams(window.location.search);
  const authorizationToken = urlParams.get("userId");
  console.log("authorizationToken", authorizationToken);
  const [data, setData] = useState([]);
  const getRank = async () => {
    let url = `/raffle/luckyCat/queryPrizePoolDetails?pageNum=${1}&pageSize=99999`;
    fetch(BaseUrl + url, {
      method: "GET",
      headers: {
        Authorization: authorizationToken,
      },
    })
      .then((response) => response.json())
      .then((response) => {
        if (response.code === 200 && response.data) {
          setData(response.data.rows || []);
        } else {
          // setData([]);
          console.error("Failed to fetch ranking data:", response.msg);
          Toast.info(response.msg);
        }
      })
      .catch((error) => console.error("Error fetching ranking data:", error));
  };

  useEffect(() => {
    if (authorizationToken) {
      getRank();
    } else {
      console.error("Authorization token not found in URL");
    }
  }, []);

  return (
    <div className={style.questionWrap}>
      <div
        className={`${style.questionWrap} ${style.questionWrap1}`}
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
        }}
      >
        <div className={style.btn_back} onClick={clickBack}>
          <ArrowLeft color="white" />
        </div>
        <div className={style.content_box}>
          <img src={titleRecord} alt="" />
          <div className={style.rank_box}>
            <div className={style.rank_list}>
              {data.map((item, i) => (
                <div className={style.td_box} key={i}>
                  <div className={style.user}>
                    <img src={item?.avatar} alt="" />
                    <div>
                      <div className={style.nickname}>
                        {item.nickname || item.account}
                      </div>
                      <div className={style.score}>
                        获得了
                        {item?.luckType === 0
                          ? "一次瓜分钻石的机会"
                          : "一只招财猫"}
                      </div>
                      <div className={style.time}>{item?.createTime}</div>
                    </div>
                  </div>
                  <div className={style.rankBtn}>
                    {<div>{item?.luckType === 0 ? "瓜分" : "收集"}</div>}
                    {item?.divideStarCoin > 0 && (
                      <div>{item?.divideStarCoin}钻</div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Record;
